<template>
	<view class="container">
		<view class="box">
			<view class="header">
				{{jiaoben.messageTitle}}--{{jiaoben.message}}
			</view>
			<view class="beizhu">
				备注：上传<text class="red">1~10</text>秒的视频，最少上传<text class="red">1</text>个，最多上传<text class="red">1000</text>个
			</view>
			<view class="beizhu" style="margin-top: -30rpx;">
				说明：若本视频工程创建后用于矩阵发布，请上传尽可能多的镜头素材(视频)，避免大量发布时被判重
			</view>
			<view class="videoList">
				<view class="video" v-for="(item,index) in form.videoList" :key="index">
					<view class="remote" @click="remove(index)">
						x
					</view>
					<video :src="item.mediaURL" style="height: 150rpx; width: 150rpx;"></video>
				</view>
			</view>
		</view>
		
		<view class="footer">
			<view class="btn" style="color: #333;background: #e3e3e3;" @click="navVideoLibrary">素材库</view>
			<view class="btn" @click="shiping">上传视频</view>
		</view>
	</view>
</template>

<script>
	import Http from "@/utils/http"
	const http = new Http()
	export default {
		data() {
			return {
				jiaoben:null,
				maxDuration:'60',
				form:{
					videoList:[]
				}
			}
		},
		onLoad(option) {
			this.jiaoben = JSON.parse(option.obj);
			this.form.videoList = this.jiaoben.videoList;
			this.maxDuration = this.jiaoben.miaoIndex;
		},
		onUnload() {
			uni.$emit('videoList',this.form.videoList);
		},
		methods: {
			//移除视频
			remove(index){
				this.form.videoList.splice(index, 1);
			},
			navVideoLibrary(){
			     uni.navigateTo({
			     	url:"/subpkg/videoLibrary/secondType"
			     })
			},
			shiping(){
				uni.chooseMedia({
				count: 1,
				mediaType: ['video'],
				sizeType: ['original'],
				sourceType: ['album', 'camera'],
				camera: 'back',
				success: (resOne) =>  {
					console.log("+++++++", resOne);
					var localPath = resOne.tempFiles[0].tempFilePath
					var height = resOne.tempFiles[0].height
					var width = resOne.tempFiles[0].width
						// res.tempFilePath 是选定视频的临时文件路径
						let obj = {
							filePath: localPath,
							minDuration: this.maxDuration,
							maxDuration: this.maxDuration,
							success: (editRes) => {
								http.temUpload(editRes.tempFilePath).then(res => {
									let a = JSON.parse(res.data);
									let obj = {
										height:height,
										width:width,
										id:this.jiaoben.index,
										mediaURL: 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/' +
											a.result.name
									}
									this.form.videoList.push(obj);
								})
							},
							fail: (res) => {
								console.log(res);
							}
						}
						uni.openVideoEditor(obj);
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		margin: 30rpx;
		padding: 20rpx;
		background: #fff;
         border-radius: 20rpx;
		 .header{
			 font-weight: 32rpx;
			 font-weight: bold;
			 padding: 10rpx 20rpx 20rpx 0rpx;
			 border-bottom: 1rpx solid #f1f1f1;
			 
		 }
		 .beizhu{
			 font-size: 30rpx;
			 color: #666;
			 padding: 20rpx 20rpx 20rpx 0rpx;
		 }
	}
	.red{
		color: red;
	}
	.videoList{
		display: flex;
		flex-wrap: wrap;
		.video{
			width: 25%;
			margin: 10rpx 0;
			box-sizing: border-box;
			padding: 10rpx;
			height: 150rpx;
			position: relative;
			border-radius: 20rpx;
			.remote{
				height: 50rpx;
				width: 50rpx;
				right: -20rpx;
				background-color: #a7a7a7;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				top: -20rpx;
				position: absolute;
				z-index: 999;
			}
			video{
				height: 100%;
				width: 100%;
			}
		}
	}
	.footer{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 110rpx;
		background: #fff;
		border-top: 1rpx solid #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		.btn{
			width: 43%;
			height: 80rpx;
			background: #00008B;
			color: #fff;
			font-size: 36rpx;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
		}
		
	}
</style>